<template>
	<view class="edit_address edit_address">
		<view class="custom_form">
			<view class="custom_form_body">
				<view class="custom_form_body_item">
					<text><text>*</text>收货人</text>
					<u-input placeholder="请输入收货人姓名" inputAlign="right" v-model="fromValue.consignee" border="none"
						:clearable="true" placeholderClass="placeholderClass"></u-input>
				</view>
				<view class="custom_form_body_item">
					<text><text>*</text>手机号码</text>
					<u-input placeholder="请输入手机号码" inputAlign="right" v-model="fromValue.phoneNumber" border="none"
						:clearable="true" placeholderClass="placeholderClass"></u-input>
				</view>
				<view class="custom_form_body_item" @click="handleArea()">
					<text><text>*</text>选择地区</text>
					<view class="custom_form_body_item_right">
						<text v-if="fromValue?.location">{{fromValue?.location?.replaceAll(',','')}}</text>
						<text v-else class="placeholder">省/市/区</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="custom_form_body_item no_border">
					<text><text>*</text>详细地址</text>
				</view>
				<u-textarea count maxlength="150" border="none" placeholder="请输入详细地址"
					v-model="fromValue.address"></u-textarea>
				<view class="custom_form_body_item">
					<text class="edit_address_item_widht">设为默认地址</text>
					<u-switch v-model="fromValue.izDefault" @change="handleSwitchChange" activeValue="1"
						inactiveValue="0" size="25" activeColor="#FF943C" inactiveColor="#B8B8B8"></u-switch>
				</view>
			</view>
			<view class="custom_form_btn" @click="handleSave">{{btnText}}</view>
			<!--  地区选择-->
			<citySelect v-model="isArea" @city-change="handleCityChange"></citySelect>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref, unref } from 'vue';
	import citySelect from '@/components/u-city-select.vue';
	import { qxWxUserDeliveryAddressEdit, qxWxUserDeliveryAddressAdd, getWxUserDefaultAddressQueryById } from '@/config/goodStuff.api';
	import { onLoad } from "@dcloudio/uni-app";

	const fromValue = reactive({
		"address": "",
		"addressLat": "",
		"addressLng": "",
		"consignee": "",
		"id": "",
		"izDefault": "1",
		"izPc": "",
		"location": "",
		"locationCode": "",
		"phoneNumber": "",
		"sysOrgCode": "",

	});
	const isArea = ref(false);
	const btnText = ref('保存');

	onLoad(async (params) => {
		console.log(params);
		// 根绝id回显表单
		if (params?.id) {
			const res = await getWxUserDefaultAddressQueryById({ id: params?.id });
			console.log(params, res);
			fromValue.id = res?.id;
			fromValue.address = res?.address;
			fromValue.consignee = res?.consignee;
			fromValue.location = res?.location;
			fromValue.locationCode = res?.locationCode;
			fromValue.phoneNumber = res?.phoneNumber;
			fromValue.izDefault = res?.izDefault;
		}
		// 根号btnText 显示按钮文字
		if (params?.btnText) {
			btnText.value = params.btnText;
		}
	})

	/**
	 * 保存
	 */
	async function handleSave() {
		const params = unref(fromValue);
		if (params?.consignee === '' || !params?.consignee) {
			return uni.showToast({
				icon: 'none',
				title: '请输入收货人姓名！'
			})
		}
		if (params?.phoneNumber === '' || !params?.phoneNumber) {
			return uni.showToast({
				icon: 'none',
				title: '请输入手机号码！'
			})
		}
		if (!uni.$u.test.mobile(params?.phoneNumber)) {
			return uni.showToast({
				icon: 'none',
				title: '请输入正确格式手机号码！'
			})
		}
		if (params?.location === '' || !params?.location) {
			return uni.showToast({
				icon: 'none',
				title: '请选择地区！'
			})
		}
		if (params?.address === '' || !params?.address) {
			return uni.showToast({
				icon: 'none',
				title: '请输入详细地址！'
			})
		}
		let res;
		if (params?.id) {
			res = await qxWxUserDeliveryAddressEdit(params);
		} else {
			res = await qxWxUserDeliveryAddressAdd(params);
		}

		uni.showToast({
			icon: 'none',
			title: '保存成功',
			success() {
				setTimeout(_ => {
					uni.navigateBack({
						success() {
							uni.$emit('updataAddressList', res);
						}
					});
				}, 500)
			}
		});

	}

	/**
	 * 打开地区选择器
	 */
	function handleArea() {
		isArea.value = true;
	}
	/**
	 * 地区监听
	 */
	function handleCityChange(e) {
		console.log(e);
		fromValue.location = e.province.label + ',' + e.city.label + ',' + e.area.label;
		fromValue.locationCode = e.province.value + ',' + e.city.value + ',' + e.area.value;
		// this.input = e.province.label + '-' + e.city.label + '-' + e.area.label;
	}

	/**
	 * 默认地址监听
	 */
	function handleSwitchChange(e) {
		fromValue.izDefault = e;
	}
</script>

<style lang="scss" scoped>
	.edit_address {
		.custom_form_body {
			padding-bottom: 24rpx;

			.custom_form_body_item {
				.edit_address_item_widht {
					flex: 1
				}
			}
		}

		.no_border {
			border-bottom: 0;
		}

		::v-deep .u-textarea {
			.u-textarea__field {
				font-size: 15px !important;
			}

			height: 294rpx;
			background-color: #F6F6F6 !important;

			// margin-top: 10rpx;
			.u-textarea__count {
				color: #B8B8B8;
				font-size: 28rpx;
				padding-bottom: 24rpx;
				background-color: #F6F6F6 !important;
			}
		}
	}
</style>